<script lang="ts" setup>
import {defineProps, ref} from 'vue';
import {useToast} from 'vue-toast-notification';
import 'vue-toast-notification/dist/theme-sugar.css';

const $toast = useToast();//消息提示栏
const props = defineProps({
  name: {
    type: String,
    value: ""
  },
  ingredientId: {
    type: Number,
    value: 0
  },
  img: {
    type: String,
    value: ""
  },
  fragranceNotedId: {
    type: Number,
    value: 0
  },
  isShowFun: {
    type: Boolean,
    value: true
  },
  isAdd:{
    type:Boolean,
    value:false
  }
});
interface FragranceNoteInfo {
  fragranceNoteId: number,
  name: string,
  introduce: string,
  inputTime: string
}

const isAdds = ref(props.isAdd)

const addIngredient = () => {
  if (localStorage.getItem("Ingredient-data-list")) {
    let flag = false
    let item = JSON.parse(localStorage.getItem("Ingredient-data-list"));
    item.forEach(el => {
      if(el.ingredientId == props.ingredientId){
        flag = true
      }
    })
    if(flag){
      $toast.open({
        type:"warning",
        message:props.name+"已添加到配料表了",
        position:"bottom-right"
      })
    }else{
      item.push({
        name:props.name,
        ingredientId:props.ingredientId,
        img:props.img
      })
      localStorage.setItem("Ingredient-data-list",JSON.stringify(item))
      $toast.open({
        type:"success",
        message:props.name+"添加成功",
        position:"bottom-right"
      })
    }
  }else{
    let data = {
      name:props.name,
      ingredientId:props.ingredientId,
      img:props.img
    }
    let arr = [data]
    localStorage.setItem("Ingredient-data-list",JSON.stringify(arr))
    $toast.open({
      type:"success",
      message:props.name+"添加成功",
      position:"bottom-right"
    })
  }
  isAdds.value = true
  // showAddInfoDiaInfo()
}


const unAddIngredient = () => {
  if(localStorage.getItem("Ingredient-data-list")){
    let arr = JSON.parse(localStorage.getItem("Ingredient-data-list"))
    let index = -1
    let flag = 0
    arr.forEach(el=>{
      if(el.name === props.name){
        index = flag
      }
      flag++
    })
    if(index != -1){
      arr.splice(index,1)
      $toast.open({
        type:"success",
        message:props.name+"移除成功",
        position:"bottom-right"
      })
    }else{
      $toast.open({
        type:"warning",
        message:props.name+"移除异常",
        position:"bottom-right"
      })
    }
    localStorage.setItem("Ingredient-data-list",JSON.stringify(arr))
    isAdds.value = false
  }else{
    $toast.open({
      type:"warning",
      message:"原料列表为空",
      position:"bottom-right"
    })
  }
  // showAddInfoDiaInfo()

}
</script>

<template>
  <div class="ingredient-item">

<!--    <q-dialog v-model="addInfoDia">-->
<!--      <q-card>-->
<!--        <q-card-section>-->
<!--          <div class="text-subtitle1">原料添加详情</div>-->
<!--        </q-card-section>-->
<!--        <q-card-section class="q-pt-none">-->
<!--          <div class="text-body1">{{tipsInfo}}</div>-->
<!--        </q-card-section>-->
<!--      </q-card>-->
<!--    </q-dialog>-->

    <div class="top-click" >
      <q-btn round color="grey-5" @click="addIngredient" icon="add_circle_outline" v-if="!isAdds"/>
      <q-btn round color="red-4" @click="unAddIngredient" icon="remove_circle_outline" v-if="isAdds"/>
    </div>
    <q-img
        :src="img"
        style="width: 170px;max-height: 180px;border-radius: 50%"
        v-if="img != ''"
    />
    <q-img
        v-if="img == ''"
        style="height: 140px; max-width: 150px"
    >
      <template v-slot:loading>
        <div class="text-subtitle1 text-white">
          Loading...
        </div>
      </template>
    </q-img>
    <div class="ingredient-title">{{ name }}</div>
  </div>
</template>

<style lang="scss" scoped>
.ingredient-item {
  margin: 10px;
  //background-color: pink;
  height: 250px;
  width: 180px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;

  .ingredient-title {
    font-size: 16px;
  }

  .top-click {
    display: flex;
    width: 100%;
    margin-bottom: -30px;
    justify-content: flex-end;
  }
}
</style>